<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="患者姓名" prop="patientName">
				<el-input
					v-model="queryParams.patientName"
					placeholder="请输入患者姓名"
					clearable
					size="small"
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item>
				<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-table v-loading="loading" :data="patientList">
			<el-table-column type="index" :index="indexMethod" label="序号" width="55" align="center" />
			<el-table-column label="患者姓名" align="center" prop="patientName" width="150"/>
			<el-table-column label="手机号" align="center" prop="phone" width="150">
				<template slot-scope="scope">{{scope.row.user.phonenumber}}</template>
			</el-table-column>
			<el-table-column label="性别" align="center" prop="sex" width="100">
				<template slot-scope="scope">
					<span v-if="scope.row.user.sex == 0">
						<el-tag>
							<i class="el-icon-male"></i> {{ labelFilter(scope.row.user.sex, sexOptions) }}
						</el-tag>
					</span>
					<span v-if="scope.row.user.sex == 1">
						<el-tag type="danger">
							<i class="el-icon-female"></i> {{ labelFilter(scope.row.user.sex, sexOptions) }}
						</el-tag>
					</span>
					<span v-if="scope.row.user.sex == 2">
						<el-tag type="warning">
							{{ labelFilter(scope.row.user.sex, sexOptions) }}
						</el-tag>
					</span>
				</template>
			</el-table-column>
			<el-table-column label="出生年月" align="center" prop="birthDate" width="100">
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.birthDate, '{y}-{m}-{d}') }}</span>
				</template>
			</el-table-column>
			<el-table-column label="省份" align="center" width="120">
				<template slot-scope="scope">{{ scope.row.user.province }}</template>
			</el-table-column>
			<el-table-column label="城市" align="center" width="120">
				<template slot-scope="scope">{{ scope.row.user.city }}</template>
			</el-table-column>
			<el-table-column label="区县" align="center" width="120">
				<template slot-scope="scope">{{ scope.row.user.area }}</template>
			</el-table-column>
			<el-table-column label="关联时间" align="center">
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.bindTime) }}</span>
				</template>
			</el-table-column>
			<div slot="empty">
				<el-empty description="暂无信息"></el-empty>
			</div>
		</el-table>

		<pagination
			v-show="total>0"
			:total="total"
			:page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize"
			@pagination="getList"
		/>
	</div>
</template>

<script>
import { listPatient } from "@/api/patient";

export default {
	props: {
		doctorId: {

		}
	},
	data() {
		return {
			loading: false,
			patientList: [],
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				bindId: null,
				patientName: undefined
			},
			total: 0,
			visible: true,
			showSearch: true
		};
	},
	created() {
		this.getDicts("sys_user_sex").then((response) => {
			this.sexOptions = response.data;
		});
	},
	mounted() {

	},
	computed: {
		labelFilter() {
			return ((text, option) => {
				for (let i = 0; i < option.length; i++) {
					if (option[i].dictValue == text) {
						return option[i].dictLabel;
					}
				}
			})
		}
	},
	methods: {
		getList() {
			this.loading = true;
			listPatient(this.queryParams).then(response => {
				this.patientList = response.rows;
				this.total = response.total;
				this.loading = false;
			})
		},
		close() {
			this.$emit('close')
		},
		handleClose() {
			this.$emit('close')
		},
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm");
			this.handleQuery();
		},
		indexMethod(index) {
			return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1;
		}
	},
	watch: {
		doctorId: function() {
			this.queryParams.bindId = this.doctorId;
			this.getList();
		}
	}
}
</script>

<style lang="scss" scoped>

</style>
